<template>
    <div class="outDiv">
        <div class="body">
            <div>
                <label @click="btnIndex()">
                    < 返回 </label>
            </div>
            <div class="listTop">
                <span style="font-weight: 900; font-size: 20px;">{{ aTitle }}</span>
                <span class="status">{{ aStatus }}</span>
            </div>
            <div class="listBottom">
                <table>
                    <tbody>
                        <tr>
                            <td>活动时间</td>
                            <td><input type="text" v-model="aTime" style="width: 100%;" readonly></td>
                        </tr>
                        <tr>
                            <td>活动地点</td>
                            <td><input type="text" v-model="aPlace" readonly></td>
                        </tr>
                        <tr>
                            <td><span>活动简介</span></td>
                            <td><input type="text" v-model="aContent" style="width: 100%;" readonly></td>
                        </tr>
                        <tr>
                            <td>活动来源</td>
                            <td><input type="text" v-model="aSource" readonly></td>
                        </tr>
                        <tr>
                            <td>服务时长</td>
                            <td><input type="text" v-model="aServerTime" readonly></td>
                        </tr>
                        <tr>
                            <td>招募人数</td>
                            <td><input type="text" v-model="aNumber" readonly></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="bottom">
            <input type="button" :value="content" @click="btnHome" :disabled="clickStu" :class="{ 'fontC': !clickStu }">
        </div>
    </div>
</template>
<script setup>
// == 引入需要的依赖-开始 ==
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { url } from './router.js'
// == 引入需要的依赖-开始 ==

// == 实例化对象-开始 ==
let router = useRouter()
let route = useRoute()
let aId = route.params.id
let aTime = ref('')
let aPlace = ref('')
let aContent = ref('')
let aSource = ref('')
let aServerTime = ref('')
let aNumber = ref('')
let aStatus = ref('')
let aTitle = ref('')
let clickStu = ref(false)
let content = ref('')
// == 实例化对象-结束 ==

// == 相关动作函数-开始 ==
onMounted(() => {
    fetch(`${url}/volunteer/${aId}`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        // 根据数据库的报名状态 来确定该志愿活动的状态 
        // 如果数据库显示已结束则不让用户点击和报名 
        // 如果数据库中的状态==2则告诉用户该活动已经申报 并禁止点击
        if (data.vstatus === '已结束') {
            clickStu.value = true
            content.value = '活动已结束'
        } else {
            if (data.statue !== null) {
                content.value = '已报名'
                clickStu.value = true
            } else {
                content.value = '立即报名'
            }
        }
        // 赋值
        aTime.value = data.vtime,
            aPlace.value = data.place,
            aContent.value = data.content,
            aSource.value = data.source,
            aServerTime.value = data.servertime,
            aNumber.value = data.people
        aStatus.value = data.vstatus
        aTitle.value = data.title

    })
})
//报名活动 报名成功之后修改状态并跳转至首页如果在认领活动中的话就只改变状态不跳转
function btnHome() {
    let obj = {
        statue: 2,
    }
    fetch(`${url}/volunteer/${aId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(obj)
    }).then(res => {
        if (res.ok && route.fullPath.startsWith('/activity')) {
            alert('报名成功')
            // 刷新页面
            location.reload()
        } else {
            alert('报名成功')
            router.push('index')
        }
    })
}
// 回到首页 还是回到认领活动页面 要进行判断
function btnIndex() {
    // 获取当前路由
    let thisRoute = route.fullPath
    // 判断
    if (thisRoute.startsWith('/activity')) {
        router.push('/activity/0')
    } else {
        router.push('/index')
    }
}
// == 相关动作函数-结束 ==
</script>
<style scoped>
label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}

.fontC {
    color: #fff;
}

.listTop {
    width: 100%;
    height: 18%;
    /* background-color: red; */
    display: flex;
    font-family: cursive;
    justify-content: space-evenly;
    flex-direction: column;
    border-bottom: 1px dashed gray;
}

tr {
    line-height: 40px;
}

td {
    width: 50px;
}

input {
    border: none;
    font-family: cursive;
    outline: none;
}

.content {
    height: 50px;
}

.listBottom {
    width: 100%;
    height: 70%;
}

table {
    font-family: cursive;
    width: 100%;
    line-height: 32px;
}

.status {
    margin-top: -4%;
    font-size: 12px;
    color: white;
    background-color: darkgray;
    text-align: center;
    border-radius: 20px;
    border: 1px solid black;
    height: 20px;
    line-height: 20px;
    width: 52px;
}

.bottom {
    width: 100%;
    height: 5%;
    background-color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom input {
    font-family: cursive;
    width: 100%;
    height: 100%;
    font-size: 20px;
    background-color: unset;

}

.outDiv {
    width: 100%;
    height: 100vh;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.body {
    width: 100%;
    height: 48%;
    background-color: #fff;
}
</style>
